@use 'sass:map';
@use 'sass:color';

.home-box {
  position: relative;
  display: block;
  height: calc(100vh - 105px);
  overflow: hidden;
}

#home-map {
  height: 100%;
}

.home-box-tree {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 99;
  width: 240px;
}

.home-zoom {
  position: absolute;
  bottom: map.get($spacing, 'fifthGear') + map.get($spacing, 'thirdGear');
  right: map.get($spacing, 'secondGear');
  transition: bottom var(--el-transition-duration);

  // &.asset-home-zoom-expand {
  //   bottom: 400px + map.get($spacing, 'fourthGear');
  // }

  :global {
    .el-card__body {
      padding: map.get($spacing, 'firstGear');
    }

    .zoom-number-card {
      font-size: map.get($font-size, 'small');
      width: 35px;
      height: 30px;
      line-height: 1.2;
      text-align: center;
    }

    .zoom-option-card {
      .el-card__body {
        text-align: center;
        padding-bottom: 0;
      }

      .el-divider {
        margin: 0;
      }
    }
  }
}

@keyframes animate-cloud {
  0% {
    right: -500px;
  }

  100% {
    right: 30px;
  }
}

.home-info {
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 99;
  width: 650px;
  font-size: 14px;
  animation: animate-cloud 0.55s ease-out;

  :global {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-right {
        display: flex;
        align-items: center;

        .card-right-run {
          display: inline-block;
          margin-right: 10px;
        }
      }
    }

    .el-card__header {
      background: #4c72f6;
      padding: 8px 16px;

      .card-header {
        color: #fff;
      }
    }
  }
}

.home-tree {
  :global {
    .el-card__body {
      padding: 0;
    }

    .home-tree-label {
      padding: 10px 12px;
      font-size: 16px;
      color: #fff;
      background: #4c72f6;
    }

    .home-tree-input {
      padding: 6px 12px;
      border-bottom: 1px solid #e4e7ec;
    }

    .home-tree-data {
      max-height: 670px;
      padding: 6px;
      overflow: auto;
      font-size: 14px;
    }
  }
}

.home-box-accounting {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;

  :global {
    .el-tag {
      margin-right: 10px;
      height: 32px;
      padding: 0 12px;
      cursor: pointer;
    }
  }
}
